﻿@using (Html.Bootstrap().Container().Begin())
{
    @Html.Bootstrap().Heading1("Container")
    using (Html.Bootstrap().Div().SetId("test-container").Begin())
    {
        using (Html.Bootstrap().Container().Begin())
        {
            <text>Container</text>
        }
    }

    <hr />

    @Html.Bootstrap().Heading1("Fluid Container")
    using (Html.Bootstrap().Div().SetId("test-fluid-container").Begin())
    {
        using (Html.Bootstrap().Container().SetFluid().Begin())
        {
            <text>Fluid Container</text>
        }
    }
    
    <hr />

    @Html.Bootstrap().Heading1("Simple Grid")
    using (Html.Bootstrap().Div().SetId("test-simple-grid").Begin())
    {
        using(var row = Html.Bootstrap().GridRow().Begin())
        {
            using (row.GridColumn(3).Begin())
            {
                <text>3</text>
            }
            using (row.GridColumn(4).Begin())
            {
                <text>4</text>
            }
            using (row.GridColumn(5).Begin())
            {
                <text>5</text>
            }
        }
    }

    <hr />

    @Html.Bootstrap().Heading1("Complex Grid")
    using (Html.Bootstrap().Div().SetId("test-complex-grid").Begin())
    {
        using (var row = Html.Bootstrap().GridRow().Begin())
        {
            using (row.GridColumn().SetXs(1).Begin())
            {
                <text>Xs1</text>
            }
            using (row.GridColumn().SetSm(2).Begin())
            {
                <text>Sm2</text>
            }
            using (row.GridColumn().SetMd(3).Begin())
            {
                <text>Md3</text>
            }
            using (row.GridColumn().SetLg(4).Begin())
            {
                <text>Lg4</text>
            }
            using (row.GridColumn().SetXs(2).SetLg(3).Begin())
            {
                <text>Xs2Lg3</text>
            }
        }
    }
    
    <hr />

    @Html.Bootstrap().Heading1("Offset/Pull/Push Grid")
    using (Html.Bootstrap().Div().SetId("test-offset-pull-push-grid").Begin())
    {
        using (var row = Html.Bootstrap().GridRow().Begin())
        {
            using (row.GridColumn().SetSm(5).SetMd(6).Begin())
            {
                <text>A</text>
            }
            using (row.GridColumn().SetSm(5).SetSmOffset(2).SetMd(6).SetMdOffset(0).Begin())
            {
                <text>B</text>
            }
        }
        using (var row = Html.Bootstrap().GridRow().Begin())
        {
            using (row.GridColumn(9).SetMdPush(3).Begin())
            {
                <text>D</text>
            }
            using (row.GridColumn(3).SetMdPull(9).Begin())
            {
                <text>C</text>
            }
        }
    }
}

